<%@ page language="java" contentType="text/html; charset=UTF-8"
		 pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>

<html>
<head>
	<title>mooc-播客</title>
	<link rel="stylesheet" type="text/css" href="style/css/audio.css">
	<style>

		html, body {
			height: 100%;
		}

		body {
			display: flex;
			justify-content: center;
			align-items: center;
			background: #F8FFAE;
			background: -webkit-linear-gradient(-65deg, #43C6AC, #F8FFAE);
			background: linear-gradient(-65deg, #43C6AC, #F8FFAE);
			-webkit-font-smoothing: antialiased;
			-moz-osx-font-smoothing: grayscale;
		}

	</style>

	<meta charset="utf-8">
	<link rel="stylesheet" href="style/css/login.css">
	<script src="style/js/login.js"></script>
	<link rel="stylesheet" href="style/css/amazeui.min.css">
	<link rel="stylesheet" href="style/css/course.css">
	<link rel="stylesheet" href="style/css/admin.css">
	<script src="style/js/loginandregist.js"></script>
	<script src="style/js/jquery-2.1.4.min.js"></script>
	<script src="style/js/amazeui.min.js"></script>
	<link rel="stylesheet" href="style/css/bootstrap.min.css">

	<%-- <link rel="stylesheet"
        href="${pageContext.request.contextPath }/style/css/bootstrap.min.css">
    <script src="${pageContext.request.contextPath }/style/js/jquery.min.js"></script>
    <script
        src="${pageContext.request.contextPath }/style/js/bootstrap.min.js"></script>
    <link rel="stylesheet" type="text/css"
        href="${pageContext.request.contextPath }/style/css/course.css"> --%>
	<!--[if lt IE 9]>
	<script src="js/html5shiv.js"></script>
	<script src="js/respond.min.js"></script>
	<![endif]-->
	<style>
		body {
			padding-top: 50px;
			padding-bottom: 40px;
			color: #5a5a5a;
		}
	</style>

</head>

<body>
<!--下面是顶部导航栏的代码-->
<%@include file="head.jsp"%>



<body style="height: 800px">
<div class="audio-box">
	<div class="audio-container">
		<div class="audio-view">
			<div class="audio-cover" ></div>
			<div class="audio-body">
				<h3 class="audio-title">未知歌曲</h3>
				<div class="audio-backs">
					<div class="audio-this-time">00:00</div>
					<div class="audio-count-time">00:00</div>
					<div class="audio-setbacks">
						<i class="audio-this-setbacks">
							<span class="audio-backs-btn"></span>
						</i>
						<span class="audio-cache-setbacks">
							</span>
					</div>
				</div>
			</div>
			<div class="audio-btn">
				<div class="audio-select">
					<div class="audio-prev"></div>
					<div class="audio-play"></div>
					<div class="audio-next"></div>
					<div class="audio-menu"></div>
					<div class="audio-volume"></div>
				</div>
				<div class="audio-set-volume">
					<div class="volume-box">
						<i><span></span></i>
					</div>
				</div>
				<div class="audio-list">
					<div class="audio-list-head">
						<p>歌单</p>
						<span class="menu-close">关闭</span>
					</div>
					<ul class="audio-inline">
					</ul>
				</div>
			</div>
		</div>
	</div>
</div>
<div
		style="position: relative; border: 2px solid; border-radius: 5px;  top: 20px; width: 1000px; padding: 10px;">
	<!-- 输入区 -->
	<div
			style=" position: relative; width: 975px; padding: 10px; margin-bottom: 30px; border-bottom-style: dotted;">
		<form action="subreviewMusic" method="post">
			<input type="hidden" name="courseid" value="${music.id}">
			<div
					style="position: relative; height: 150px; width: 200px; padding: 20px;">
				感觉课程怎么样？<br> <input type="radio" name="lable" value="1">一般<br>
				<input type="radio" name="lable" value="2">还行<br> <input
					type="radio" name="lable" value="3">不错<br> <input
					type="radio" name="lable" value="4">非常好<br>
			</div>
			<div
					style="position: absolute; left: 250px; top: 10px; height: 150px; width: 500px;">
					<textarea name="context" style="width: 100%; height: 100%;"
							  placeholder="输入你想说的话"></textarea>
			</div>
			<div
					style="position: absolute; left: 750px; top: 10px; height: 150px; width: 100px;">
				<input type="submit" value="提交"
					   style="position: relative; left: 20px; top: 100px; height: 30px; width: 90px; border: 2px solid; border-radius: 5px;">
			</div>
		</form>
	</div>
	<!-- 展示评论区 -->
	<c:forEach var="review" items="${reviews}" varStatus="status">
		<div
				style="position: relative; width: 955px; border: 2px solid; border-radius: 5px; margin: 10px;">
			<div
					style=" position: relative; width: 200px; height: 100px; padding-left: 20px; padding-top: 10px;">
				<c:if test="${review.vip==0 }">
					<img alt="" src="style/image/vi.JPG">
				</c:if>
				<c:if test="${review.vip==1 }">
					<img alt="" src="style/image/vip.JPG">
				</c:if>
				用户：${review.username}<br>
				<c:if test="${review.lable != null }">
					<c:if test="${review.sex ==null}">
						他觉得课程:
					</c:if>
					<c:if test="${review.sex eq 'Male'}">
						他觉得课程:
					</c:if>
					<c:if test="${review.sex eq 'Female'}">
						她觉得课程:
					</c:if>

					<c:if test="${review.lable == 1 }">
						一般
					</c:if>
					<c:if test="${review.lable == 2 }">
						还行
					</c:if>
					<c:if test="${review.lable == 3 }">
						不错
					</c:if>
					<c:if test="${review.lable == 4 }">
						非常好
					</c:if>
				</c:if>
			</div>
			<div
					style="position: absolute; left: 210px; top: 10px; height: 80px; width: 640px;">

					${review.context}</div>
			<div
					style="position: absolute; left: 850px; top: 5px; height: 80px; width: 100px;">
				发表于：<br><fmt:formatDate value="${review.time}" pattern="yyyy-MM-dd HH:mm:ss"/></div>
		</div>
	</c:forEach>
</div>
</body>
<!-- 评论区 -->




</body>

<script type="text/javascript" src="style/js/jquery.min.js"></script>
<script type="text/javascript" src="style/js/audio.js"></script>
<script type="text/javascript">
    $(function(){

        var song = [
            {
                'cover' : '${pageContext.request.contextPath}/ExRes/${music.pic}',
                'src' : '${pageContext.request.contextPath}/ExRes/${music.mp3}',
                'title' : '${music.name}-${music.context}'
            }
        ];

        var audioFn = audioPlay({
            song : song,
            autoPlay : true  //是否立即播放第一首，autoPlay为true且song为空，会alert文本提示并退出
        });

        /* 向歌单中添加新曲目，第二个参数true为新增后立即播放该曲目，false则不播放 */
        // audioFn.newSong({
        //     'cover' : 'images/cover5.jpg',
        //     'src' : 'https://amazingaudioplayer.com/wp-content/uploads/amazingaudioplayer/5/audios/Soaring%20Spirit.mp3',
        //     'title' : 'B.A.A.B'
        // },false);

        /* 暂停播放 */
        //audioFn.stopAudio();

        /* 开启播放 */
        //audioFn.playAudio();

        /* 选择歌单中索引为3的曲目(索引是从0开始的)，第二个参数true立即播放该曲目，false则不播放 */
        //audioFn.selectMenu(3,true);

        /* 查看歌单中的曲目 */
        //console.log(audioFn.song);

        /* 当前播放曲目的对象 */
        //console.log(audioFn.audio);
    });
    var _hmt = _hmt || [];
    (function() {
        var hm = document.createElement("script");
        hm.src = "https://hm.baidu.com/hm.js?ecbff70bd46d40393c105bbc42edfcad";
        var s = document.getElementsByTagName("script")[0];
        s.parentNode.insertBefore(hm, s);
    })();
</script>
</html>
